<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style lang="scss">
	@import '@/theme.scss';
	view {
		box-sizing: border-box;
	}
	
	page {
		font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
		font-size: 28rpx;
		line-height: 1.6;
		color: #2C3E50;
		background-color: #F5F7FA;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		user-select: auto;
	}
	
	.container {
		padding: 30rpx;
		max-width: 1200rpx;
		margin: 0 auto;
	}
	
	.card {
		background-color: #FFFFFF;
		border-radius: 16rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		padding: 30rpx;
		margin-bottom: 20rpx;
		border: 1rpx solid #E0E6ED;
	}
	
	.btn {
		height: 88rpx;
		line-height: 88rpx;
		padding: 0 40rpx;
		text-align: center;
		border-radius: 44rpx;
		font-size: 30rpx;
		font-weight: 600;
		border: none;
	}
	
	.btn-primary {
		background: #4CAF50;
		color: #ffffff;
		box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.2);
	}
	
	.btn-outline {
		background: transparent;
		border: 2rpx solid #4CAF50;
		color: #4CAF50;
	}
	
	input, textarea {
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 16rpx 24rpx;
		font-size: 28rpx;
		border: 2rpx solid #E0E6ED;
		width: 100%;
		color: #2C3E50;
		height: 70rpx;
		box-sizing: border-box;
	}
	
	textarea {
		height: auto;
		min-height: 70rpx;
	}
	
	.list-item {
		padding: 24rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-bottom: 16rpx;
		border: 1rpx solid #E0E6ED;
	}
	
	.tag {
		display: inline-flex;
		align-items: center;
		padding: 6rpx 16rpx;
		font-size: 24rpx;
		border-radius: 8rpx;
		margin-right: 12rpx;
		background-color: #F1F8E9;
		color: #4CAF50;
		font-weight: 500;
	}
	
	.avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		object-fit: cover;
		border: 2rpx solid #FFFFFF;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}
	
	.divider {
		height: 1rpx;
		background: #E0E6ED;
		margin: 24rpx 0;
	}
	
	.text-h1 {
		font-size: 44rpx;
		font-weight: 700;
		color: #2C3E50;
		line-height: 1.3;
		margin-bottom: 24rpx;
	}
	
	.text-h2 {
		font-size: 36rpx;
		font-weight: 600;
		color: #2C3E50;
		line-height: 1.35;
		margin-bottom: 20rpx;
	}
	
	.text-body {
		font-size: 28rpx;
		color: #34495E;
		line-height: 1.6;
	}
	
	.shadow-sm {
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.shadow {
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}
	
	.mt-1 { margin-top: 10rpx; }
	.mt-2 { margin-top: 20rpx; }
	.mt-3 { margin-top: 30rpx; }
	.mb-1 { margin-bottom: 10rpx; }
	.mb-2 { margin-bottom: 20rpx; }
	.mb-3 { margin-bottom: 30rpx; }
	
	.flex {
		display: flex;
	}
	
	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.flex-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	
	.text-success { color: #2ECC71; }
	.text-warning { color: #F1C40F; }
	.text-error { color: #E74C3C; }
	.text-info { color: #3498DB; }
	.text-muted { color: #7F8C8D; }
	
	.bg-success { background-color: #E8F5E9; }
	.bg-warning { background-color: #FFF3E0; }
	.bg-error { background-color: #FFEBEE; }
	.bg-info { background-color: #E3F2FD; }
	
	.search-box {
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx;
		margin: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
	}
	
	.menu-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20rpx;
		padding: 20rpx;
	}
	
	.menu-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		text-align: center;
	}
	
	.menu-item-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 10rpx;
	}
	
	.menu-item-text {
		font-size: 24rpx;
		color: #2C3E50;
	}
</style>
